import React,{Component} from 'react';
import { connect } from 'react-redux';
import { Card,Button,Table,message,Select,Modal} from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import {reqUpdateRelationStatus,reqRelationList,reqSearchRelation,reqUpdateRejectStatus,reqSearchReject} from '../../../api';
import { saveRelationListAction} from '../../../redux/action_creators/course_action';
import {PAGE_SIZE,} from '../../../config';
import dayjs from 'dayjs';

const { Option } = Select;
@connect(
    state=>({course:state.course}),
    {
        saveRelationList:saveRelationListAction
    }
)
class Relation extends Component {
    state={
        relationList:[],//用户列表
        roleList:[],//角色列表
        isLoading:true, //table是否显示加载动画
        id:'',
        keyWord:'', //搜索关键词
        searchType:'all',//默认搜索方式按名称搜索
    }
    componentDidMount(){
        const { relationList } = this.props.course;
        if(relationList.length>0){
            // console.log(studentList);
            this.setState({
                relationList,
                isLoading:false,
            })
        }else{
            this.getRelationList()
        }
    }

    // 获取课程列表
    getRelationList = async () => {
        let result = await reqRelationList()
        const { code,data,msg} = result
        // console.log(result);
       if(code === 200){
            this.setState({
                relationList:data,
                isLoading:false,
            })
            //   把课程列表保存到redux中
              this.props.saveRelationList(data)
            //   数据为空时，显示提示信息
              if(data.length===0) message.success(msg,1)  
        }else{
            message.error(msg,1)      
        } 
    }
    // 弹出提示是否修改选课状态
    updateStatus = (id)=>{
        let{ updateRelationStatus } = this
        Modal.confirm({
            icon: <ExclamationCircleOutlined/>,
            title:'同意退课',
            content:'你确定要同意退课吗？',
            okText:'确定',
            cancelText:'取消',
            onOk(){
                updateRelationStatus(id)
            },
            onCancel() {
                console.log('取消');
            },
        });
    }
    updateRejectStatus= (id)=>{
        let{ updateRelationReject } = this
        Modal.confirm({
            icon: <ExclamationCircleOutlined/>,
            title:'拒绝退课',
            content:'你确定要拒绝退课吗？',
            okText:'确定',
            cancelText:'取消',
            onOk(){
                updateRelationReject(id)
            },
            onCancel() {
                console.log('取消');
            },
        });
    }
      // 修改课程状态
      updateRelationStatus= async (id) => {
        let relationList = [...this.state.relationList]
        let result =await reqUpdateRelationStatus(id)
        const { code,msg} = result
        if(code === 200){
            message.success('已同意退课！',1)
            relationList = relationList.map((item)=>{
                if(item.id === id){  item.status = -1; item.reject = 0}
                return item;
            })
            this.setState({relationList})
            this.props.saveRelationList(relationList)
        }else{
            message.error(msg,1)
        }
    }
        // 修改课程状态
        updateRelationReject= async (id) => {
        let relationList = [...this.state.relationList]
        let result =await reqUpdateRejectStatus(id)
        const { code,msg} = result
        if(code === 200){
            message.success('已拒绝退课！',1)
            relationList = relationList.map((item)=>{
                if(item.id === id){
                      item.status = 1 
                      item.reject = 1
                    }
                return item;
            })
            this.setState({relationList})
            this.props.saveRelationList(relationList)
        }else{
            message.error(msg,1)
        }
    }
    searchRelation= async(value)=>{
        let result
        if(value==='all'){
            //全部状态    
            const { relationList } = this.props.course;
            if(relationList.length>0){
                // console.log(studentList);
                this.setState({
                    relationList,
                    isLoading:false,
                })
            }else{
                this.getRelationList()
            }
        }else{
             if(value==='signUp'){
                // 已报名
                result =await  reqSearchRelation(1)
            }else if(value==='apply'){
            // 申请退课中
            result =await  reqSearchRelation(0)
            }else if(value==='reject'){
                // 已拒绝退课
                result =await  reqSearchReject(1)
            }else{
                // 已退课
                result =await  reqSearchRelation(-1)
            }
            const { code,data,msg} = result
            if(code === 200){
                this.setState({
                    relationList:data,
                    isLoading:false,
                })
                //   数据为空时，显示提示信息
                if(data.length===0) message.success(msg,1)  
            }else{
                message.error(msg,1)      
            }
        }
    }

    render(){
        const  {relationList,searchType} = this.state
          const columns = [
            {title: '学员学号',
                dataIndex: 'studentNum',
                key: 'id',
            },
            {title: '学生姓名',
              dataIndex: 'studentName',
              key: 'id',
            },
            {title: '课程编号',
              dataIndex: 'courseNum',
              key: 'id',
            },
            {title: '课程名称',
                dataIndex: 'courseName',
                key: 'id', 
            },
            {title: '讲师工号',
                dataIndex: 'teacherNum',
                key: 'id', 
            },
            {title: '讲师姓名',
              dataIndex: 'teacherName',
              key: 'id',
             
            },
            {title: '创建时间',
                dataIndex: 'createTime',
                key: 'id',
                render:(time)=>dayjs(time).format('YYYY年MM月DD日  HH:mm:ss')
            },
            {
                title: '状态',
                // dataIndex: 'status',
                key: 'id',
                align:'center',
                width:'20%',
                render:(item)=>{
                    return(
                        <div>
                            <span>{item.status=== 1 ? '已报名':(item.status=== 0 ? '申请退课中':'已退课')}
                            {item.status=== 1?
                                <Button  type={'link'} onClick={()=>this.updateStatus(item.id)}>退课</Button>:''}
                            </span>
                            <br></br>
                            {item.status=== 0 ?<span>
                                <Button 
                                    type={'link'}
                                    onClick={()=>this.updateStatus(item.id)}
                                >同意退课</Button>
                                <Button 
                                    type={'link'}
                                    onClick={()=>this.updateRejectStatus(item.id)}
                                > 拒绝退课 </Button></span>
                                :(item.reject=== 1 ? '(已拒绝退课)':'')
                            }
                        </div>
                    )
                }
            }
          ];
      
        return (
            <div>
                <Card
                     extra={
                        <div>
                            <Select 
                                defaultValue={searchType} 
                                style={{ width: 150 }} 
                                onChange={(value)=>this.searchRelation(value)}
                            >
                                <Option key="1" value="all">全部状态</Option>
                                <Option key="2" value="apply">申请退课中</Option>
                                <Option key="3" value="reject">已拒绝退课</Option>
                                <Option key="4" value="signUp">已报名</Option>
                                <Option key="5" value="exit">已退课</Option>
                            </Select>
                        </div>
                    }
                >
                    <Table 
                        dataSource={relationList} 
                        columns={columns}
                        bordered
                        rowKey='id'
                        pagination={{
                            pageSize:PAGE_SIZE,
                        }}
                        loading={this.state.isLoading} 
                    />
                </Card>
            </div>
        );
    }
}
export default Relation;